<template>
  <view class="my-progress" ref="bar" :style="[{
        height: `${height}px`,
        backgroundColor: inactiveColor
      }]">
    <view class="my-progress-inner-bar" ref="innerBar" :style="[{
        height: `${height-4}px`,
        width: `${lineWidth}px`,
        backgroundColor: activeColor,
      }]">
      <view v-if="showDot" class="my-progress-dot" :style="[{
        width: `${height-4}px`,
        height: `${height-4}px`,
        left: `${lineWidth == 0 ? 0 : lineWidth - height + 4}px`,
        backgroundColor: dotColor
      }]"></view>
      <view v-if="showTips" class="my-progress-tips" :style="[{
        left: `${lineWidth - height}px`,
        backgroundColor: tipsBackgroudColor,
        color: tipsColor,
        bottom: `${parseInt(height) + 4}px`
      }]">
        <view>{{percentage}}</view>
        <view class="triangle" :style="[{
          borderTopColor: tipsBackgroudColor
        }]"></view>
      </view>      
    </view>
  </view>
</template>

<script>
	export default {
		name: "my-progress",
    props: {
      activeColor: {
      	type: String,
      	default: '#00BA7D'
      },
      inactiveColor: {
      	type: String,
      	default: '#ececec'
      },
      // 圆点颜色
      dotColor: {
        type: String,
        default: '#fff'
      },
      tipsBackgroudColor: {
        type: String,
        default: '#6A2F02'
      },
      tipsColor: {
        type: String,
        default: '#fff'
      },
      // 进度百分比，数值
      percentage: {
        type: [String, Number],
        default: 0
      },
      showDot: {
        type: Boolean,
        default: true
      },
      // 是否现实tips
      showTips: {
        type: Boolean,
        default: true
      },
      // 进度条的高度，单位px
      height: {
        type: [String, Number],
        default: 12
      }
    },
		data() {
			return {
				lineWidth: 0,
			}
		},
		watch: {
			percentage(n) {
				this.resizeProgressWidth()
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
        this.resizeProgressWidth()
			},
			resizeProgressWidth() {
        let totalWidth = this.$refs.bar.$el.offsetWidth;
				this.lineWidth = totalWidth * this.percentage / 100;
			}
		}
	}
</script>

<style lang="scss" scoped>

.my-progress {
  width: 100%;
  border-radius: 60rpx;
  box-shadow: inset 0px 8rpx 20rpx 0px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 2px;
}
.my-progress-inner-bar {
  border-radius: 60px;
  position: relative;
}
.my-progress-dot {
  border-radius: 60px;
  position: absolute;
  box-shadow: 0px 8rpx 20rpx 0px rgba(0, 0, 0, 0.3);
}
.my-progress-tips {
  position: absolute;
  border-radius: 4px;
  padding: 0 4px;
  width: 20px;
  text-align: center;
  .triangle {
    position: absolute;
    width: 0px;
    height: 0px;
    border: 5px solid transparent;
    margin-left: 5px;
  }
}
</style>
